import { getBanners, getSongMenu } from "../../service/api_music"
import { rankingStore, rankingMap } from "../../store/index"
import queryRect  from '../../utils/query-rect'
import throttle from "../../utils/throttle"


const throttleQueryRect = throttle(queryRect, 1000)

// pages/home-music/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperHeight: 0,
    banners: [],

    recommendSongs: [],
    recommendSongMenu: [],  //推荐歌单
    hotSongMenu: [],   //热门歌单

    rankings: {0: {}, 2: {}, 3: {}}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取页面
    this.getPageData()

    // 发起共享数据的请求
    rankingStore.dispatch("getRankingDataAction")

    // 从store获取共享的数据
    rankingStore.onState("hotRanking", (res) => {
      if (!res.tracks) return
      const recommendSongs = res.tracks.slice(0, 6)  //取出前6条数据
      this.setData({recommendSongs})
    })

    rankingStore.onState("newRanking", this.getRankingHandler(0))
    rankingStore.onState("originRanking", this.getRankingHandler(2))
    rankingStore.onState("upRanking", this.getRankingHandler(3))
  },

  //网络请求
  getPageData: function() {
    getBanners().then(res => {
      // setData在设置data数据上，是同步的
      // 通过最新的数据对wxml进行渲染，渲染的过程是异步的
      this.setData({banners: res.banners})
    })

    getSongMenu().then(res => {
      // console.log(res);
      this.setData({hotSongMenu: res.playlists})

    })

    getSongMenu('华语').then(res => {
      this.setData({recommendSongMenu: res.playlists})
    })
  },

  // 事件处理
  handleSearchClick: function() {
    wx.navigateTo({
      url: '/pages/detail-search/index',
    })
  },


  handleSwiperImageLoaded: function() {
    // 获取图片的高度
    throttleQueryRect(".swiper-image").then(res => {
      const rect = res[0]
      this.setData({swiperHeight: rect.height})
    })
  },

  handleMoreClick: function() {
    // console.log("监听推荐歌曲中的更多的点击");
    // wx.navigateTo({
    //   url: '/pages/detail-songs/index',
    // })

    this.navigateToDetailSongPage("hotRanking")
  },
  
  handleRankingItemClick: function(event) {
    // console.log(event);
    const idx = event.currentTarget.dataset.idx
    const rankingName = rankingMap[idx]
    this.navigateToDetailSongPage(rankingName)
  },

  navigateToDetailSongPage: function(rankingName) {
    wx.navigateTo({
      url: `/pages/detail-songs/index?ranking=${rankingName}&type=rank`,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  getRankingHandler: function(idx) {
    return (res) => {
      if (Object.keys(res).length === 0) return

      // console.log("idx:",idx);
      const name = res.name
      // console.log(name);
      const coverImgUrl = res.coverImgUrl
      const playCount = res.playCount
      const songList = res.tracks.slice(0, 3)
      const rankingObj = {name,coverImgUrl, playCount, songList}
      const newRankings = {...this.data.rankings, [idx]: rankingObj}

      this.setData({
        rankings: newRankings
      })
      // console.log(this.data.rankings);
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})